<template>
	<view class="ty-log">
		<page-top title="生产日报表-日志">
			<view class="" slot="left">
				<u-icon @click="clickPageTopEv" color="#FFFFFF" size="16px" name="arrow-left"></u-icon>
			</view>
		</page-top>
		<view class="search">
			<u-search @search="searchSuer" bgColor="#F8F7F7" placeholder="单号/部门/经办人" v-model="searchData.search"
				@custom="showMore = true" shape="square" action-text="更多"></u-search>
		</view>
		
		<view class="data-list">
			<scroll-view scroll-y="true" class="scroll-Y scroll-active" @scrolltolower="scrolltolower">
				<u-cell-group>
					<u-cell :title="item.wr_no" v-for="(item,index) in dataList" :key="item.wr_no" @click="clickuCellEv(item.wr_no)" >
						
						<view slot="title" class="cell-label" style="color: black;">
							<u-row>
								<u-col span="6">
									<view>{{item.wr_no}}</view>
								</u-col>
								<u-col span="6">
									<view class="text-right">{{item.wr_dd}}ㅤㅤ</view>
								</u-col>
							</u-row>
						</view>
						<view slot="label" class="cell-label">
							<u-row>
								<u-col span="6">
									<view>{{item.dep_name}}</view>
								</u-col>
								<u-col span="6">
									<view class="text-right">{{item.sal_name}}ㅤㅤ</view>
								</u-col>
							</u-row>
						</view>
						<view slot="icon" style="color: #11A9F0;">
							{{index+1}}
						</view>
					</u-cell>
				</u-cell-group>
			</scroll-view>
		</view>
		
		<!-- 更多搜索 -->
		<u-modal @cancel="showMore=false" @confirm="confirmSuer" :show="showMore" showCancelButton showConfirmButton>
			<view class="slot-content">
				<view class="search-date">
					<view class="search-date-str search-date-itm">
						<view class="left">开始</view>
						<view class="right">
							<picker mode="date" @change="strDateEv" :value="searchData.sta_dd" :start="minDate"
								:end="maxDate">
								<view class="uni-input">{{searchData.sta_dd}}</view>
							</picker>
						</view>
					</view>
					<view class="search-date-est search-date-itm">
						<view class="left">结束</view>
						<view class="right">
							<picker mode="date" @change="estDateEv" :value="searchData.est_dd" :start="minDate"
								:end="maxDate">
								<view class="uni-input">{{searchData.est_dd}}</view>
							</picker>
						</view>

					</view>
					<view class="search-date-cus-name search-date-itm">
						<view class="left">
							单号
						</view>
						<view class="right">
							<input v-model="searchData.search" class="uni-input" placeholder="输入单号/部门/经办人" />
						</view>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import pageTop from '@/components/pageTop.vue';

	import {
		 basicBgListApiGet
	} from '@/common/api/basic.js';

	const d = new Date()
	let year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate()
	date = date < 10 ? `0${date}` : date

	export default {
		components: {
			pageTop: pageTop
		},
		data() {
			return {
				showMore: true,
				searchData: {
					previousPage: false,
					nextPage: false,
					page: 0,
					totalPage: 0,
					search: '',
					sta_dd: `${year}-${month}-${date}`,
					est_dd: `${year}-${month}-${date}`,
				},
				minDate: `${year-1}-${month}-${date}`,
				maxDate: `${year}-${month}-${date}`,
				dataList:[]
			}
		},
		async onLoad(e) {
			if (e.search == '1') {
				this.searchData .page = 0
				this.dataList = []
				await this.searchGet()
			} 
			

		},
		methods: {
			clickPageTopEv(val) {
				// uni.switchTab({
				// 	url: '/pages/index/index'
				// });
				uni.navigateBack({
					delta:1
				});
			},
			// 输入框确认搜索
			async searchSuer(e) {
				// basicTyCurdListApiGet
				this.searchData.page = 0
				this.dataList = []
				await this.searchGet()
			},
			// 开始日期
			strDateEv(val) {
				this.searchData.sta_dd = val.target.value
			},
			// 结束日期
			estDateEv(val) {
				this.searchData.est_dd = val.target.value
			},
			// 确认查询数据方法
			async confirmSuer() {
				this.showMore = false
				this.searchData.page = 0
				this.dataList = []
				await this.searchGet()
			},
			// 查询数据方法
			async searchGet() {
				try {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.searchData.page += 1
					let arr_data = await basicBgListApiGet(this.searchData)
					uni.hideLoading();
					if (arr_data.statusCode == 202) {

						uni.showModal({
							content: arr_data.data.msg,
							showCancel: false
						});

						return
					}
					if (arr_data.statusCode !== 200) {
						uni.showModal({
							content: '查询数据失败',
							showCancel: false
						});

						return
					}
					this.dataList = [...this.dataList,...arr_data.data.result.data]
					this.searchData.previousPage = arr_data.data.result.previousPage
					this.searchData.nextPage = arr_data.data.result.nextPage
					this.searchData.totalPage = arr_data.data.result.totalPage
				} catch (err) {
					//TODO handle the exception
					console.log(err)
					uni.hideLoading();
					let message = '接口请求失败请联系管理员'
					if (err.statusCode == 401) {
						message = err.data.msg
					}
					uni.showModal({
						content: message,
						showCancel: false
					});
				}
			},
			async scrolltolower() {
				await this.searchGet()
			},
			
			// 点击进入详情
			clickuCellEv(no) {
				let pmar = JSON.stringify(this.searchData)
				uni.navigateTo({
					url: '/pages/wr/logInfo?search='+pmar+'&no='+no
				});
			},
			// 返回的查询时间
			async navigateBackEv(val) {
				console.log('返回')
				this.searchData = val
				this.searchData.page = 0
				this.dataList = []
				await this.searchGet()
			}

		},

	}
</script>

<style lang="scss">
	page {
		height: 100%;
		// background-color: pink;
	}

	.ty-log {
		height: 100%;
	}

	.search {
		padding-top: 3px;
		padding-bottom: 3px;
		padding-left: 10rpx;
		padding-right: 10rpx;
		height: 35px;
		// background-color: red;
		box-sizing: border-box;
	}
	
	// 数据列表
	.data-list {
		height: calc(100% - var(--status-bar-height) - 35px - 35px);
		overflow: hidden;
		overflow-y: scroll;
		// background-color: pink;
		box-sizing: border-box;
		.u-cell-group-label {
			color: #909399;
			font-size: 12px;
		}
	}

	// 更多过滤
	.search-date {
		width: 100%;
		color: #606266;

		.search-date-itm {
			display: flex;
			width: 100%;
			height: 45px;
			align-items: center;

			.left {
				width: 40px;
			}

			.right {
				width: calc(100% - 40px);
			}
		}

		.uni-input {
			border-bottom: var(--common-border-color) solid 1px;
		}
	}

	/deep/ .search .u-search {
		height: 100%;
	}

	/deep/ .search .u-search .u-search__content {
		height: 100%;
	}
	
	.scroll-active {
		height: 100%;
		white-space: nowrap;
	}
	/deep/ .u-cell__body__content {
		font-size: 35rpx;
	}
	/deep/ .u-cell-group-label {
		font-size: 30rpx !important;
	}
	
	.cell-label {
		font-size: 28rpx;
		padding-top: 10rpx;
		box-sizing: border-box;
		color: #606266;
	}
</style>